<template>
	<view>
		<!-- <tab-sjlist :traderId=traderId ></tab-sjlist> -->
		
		<view class="tab">
			<!-- tabNav -->
			<view class="tab-nav">
				<!-- <view class="tab-nav-item" @click="tapCard(1)"> -->
					<view class="tab-nav-item-title" :class="active == 1?'tab-nav-item-title-active':''">在售车型</view>
				<!-- </view> -->
			</view>
			<!-- tabList -->
			<view class="tab-list">
				<view class="block" v-if="active == 1">
					<block v-if="list.length>0" >
						<view class="tab-list-li" v-for="(item,index) in list" :key="index">
							<navigator :url="`/pages/carInfo/carInfo?item=${encodeURIComponent(JSON.stringify(item))}`"
								hover-class="none">
								<tab-sjitem :item="item"></tab-sjitem>
							</navigator>
						</view>
						<view class="qqxl" >
							<u-loadmore :status="status" :load-text="loadText" />
						</view>
					</block>
					<view v-else>
						<null></null>
					</view>
				</view>
			</view>
		</view>
		</view>
	</view>
</template>

<script>
	import API from "@/api/index.js"
	export default {
		data() {
			return {
				traderId: '',
				sellerInformationList: '',
				https: getApp().globalData.picturePath,
				//下拉
				active: 1,
				list: [],
				newList: [],
				page: 1,
				limit: 10,
				count:'',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
				status: 'loadmore',
			};
		},
		onLoad(option) {
			console.log(option)
			this.traderId = option.id
			this.TraderInfo();
			this.getCarList();

		},
		methods: {
			TraderInfo() {
				let that = this;
				API.TraderInfo({
					'traderId': that.traderId
				}).then(res => {
					console.log(res.data)
					this.sellerInformationList = res.data;
			
				})
			},		
			//获取车辆信息
			getCarList() {
				const data = {
					page: this.page,
					limit: this.limit,
					traderId: this.traderId,
				}
				API.usedCarListt(data).then(res => {
					this.count = res.count;
					this.list = res.data
				})
			},
		},
		onReachBottom() {
			uni.showLoading({
				title: this.status,
			});
			this.page += 1
			const data = {
				page: this.page,
				limit: this.limit,
				traderId: this.traderId,
			}
			API.usedCarListt(data).then(res => {
				this.count = res.count;
				this.list = this.list.concat(res.data)
				
			})
			this.status = 'loading';
				console.log(this.page )
				console.log(this.limit)
				console.log(this.count)
				if (this.page * this.limit >= this.count) {
					this.status = 'nomore';
				} else {
					this.status = 'loadmore';
				}
		},
	}
</script>

<style lang="scss">
	.sellerInformation {
		background-size: 100% 100%;
		box-sizing: border-box;
		height: 270rpx;
		.banner{
			padding: 40rpx;
			display: flex;
			.logo{
				width: 120rpx;
				height: 120rpx;
				margin-right: 40rpx;
			}
			.bannCenter{
				color: #fff;
				.text1{
					font-size: 35rpx;
				}
				.text2{
					margin-top: 15rpx;
				}
			}
			.logo2{
				width: 50rpx;
				height: 20rpx;
				margin-left: 30rpx;
				margin-top: 10rpx;
			}
		}
		.textNum{
			padding: 0rpx 50rpx;
			margin-bottom: 20rpx;
			display: flex;
			justify-content: space-between;
		}
		.textNumdel{
			display: flex;
			.ddd{
				color: #fff;
			}
		}

	}
	.center{
		padding: 20rpx 100rpx;
		display: flex;
		justify-content: space-between;
		background-color: #fff;
	}
	.image{
		width: 150rpx;
		height: 150rpx;
	}
	.zs{
		text-align: center;
		line-height: 50rpx;
	}
	
	
	.tab {
		background-color: $uni-bg-color;
		// margin: $uni-widthspace $uni-widthspace 0rpx;
		margin-top: 5rpx;
		border-radius: 10rpx;
	
		.tab-nav-item-title {
			font-size: 32rpx;
			color: #666;
			font-weight: bolder;
			padding: 20rpx;
		}
		
		.tab-nav-item-title-active {
			color: #333;
		}
		
		.tab-nav-item-text {
			font-size: 24rpx;
			color: #999;
			margin-top: 8rpx;
		}
		
		.tab-nav-item-border {
			
			margin-top: 12rpx;
			width: 140rpx;
			height: 6rpx;
			background-color: #fff;
		}
		
		.tab-nav-item-border-active {
			background-color: #0e2a53;
		}
	
		.tab-list {
			padding: 0 $uni-widthspace;
	
			.looker-more {
				text-align: center;
				line-height: 80rpx;
				font-size: 28rpx;
				color: #999;
			}
	
			box-sizing: border-box;
	
			.tab-list-li {
				border-bottom: 2rpx solid #eee;
				// padding: 20rpx 0rpx;
				// box-sizing: border-box;
				width: 48%;
			}
		}
		.tab-nav{
			display: flex;
			    justify-content: space-between;
		}
		.gd{
			    margin-right: 25rpx;
			    margin-top: 15rpx;
		}
	}
	.block{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.qqxl{
		text-align: center;
		margin: auto;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}
</style>
